<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点歌列表</title>
    <!-- 库文件 -->
    <script src="./src/libraries/axios.min.js"></script>
    <script src="./src/libraries/pako.js"></script>
    <!-- main -->
    <script type="module" src="./src/main.js"></script>
    <!-- 总体样式文件 -->
    <link rel="stylesheet" href="./src/resources/style/mainPage.css">
    <!-- 点歌面板样式 -->
    <link rel="stylesheet" href="./src/resources/style/orderTable.css">
    <!-- 设置面板样式 -->
    <link rel="stylesheet" href="./src/resources/style/settingPage.css">
    <!-- 登录面板样式 -->
    <link rel="stylesheet" href="./src/resources/style/loginConfig.css">
    <!-- 配置面板样式 -->
    <link rel="stylesheet" href="./src/resources/style/orderConfig.css">
</head>
<body>
    <div class="main">
        <!-- 顶层提示弹窗 -->
        <div class="alertBox"></div>

        <!-- 进度条 -->
        <div class="progress">
            <div class="progress_bar">
                <i class="dot"></i>
            </div>
        </div>

        <!-- 点歌面板-->
        <table class="orderTable">
            <!-- 菜单栏 -->
            <thead>
                <th>歌名</th>
                <th>歌手</th>
                <th>点歌人</th>
            </thead>
            <!-- 点歌列表 -->
            <tbody id="orderList"></tbody>
        </table>

        <!-- 设置面板 -->
        <div class="setting">
            <div id="menu" class="setting_menu">
                <button class="setting_btn">登录设置</button>
                <button class="setting_btn">点歌设置</button>
                <button class="setting_btn">弹幕设置</button>
                <button class="setting_btn">关于</button>
                <button id="upBtn">↑</button>
            </div>
            <div class="setting_body">
                <div id="pages" class="setting_pages">

                    <!-- 登录设置 -->
                    <table class="setting_login_page">
                        <tr>
                            <td>音乐平台</td>
                            <td><select id="platform">
                                <option value="wy">网易云音乐</option>
                                <option value="qq">QQ音乐</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td>登录方式</td>
                            <td><select id="loginType">
                                <option value="0">扫码登录</option>
                                <option value="1">验证码登录</option>
                                <option value="2">账号登录</option>
                                <option value="3">cookie登录</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td colspan="3" class="login">
                                <div class="login_panel">
                                    <!-- 登录表单 -->
                                    <div id="loginForm">
                                        <div class="login_type">
                                            <div id="userName">Hello world</div>
                                            <div id="userPhone">Hello world</div>
                                            <button id="logout">退出登录</button>
                                        </div>
                                        <!-- 扫码登录 -->
                                        <div class="login_type">
                                            <img id="qrImg" alt="点击刷新二维码">
                                        </div>
                                        <!-- 验证码登录 -->
                                        <div class="login_type">
                                            <li>手机号：<input type="text" id="phoneNumber"></li>
                                            <li>验证码：
                                                <input type="text" id="captcha">
                                                <button id="getCaptcha">获取验证码</button>
                                            </li>
                                            <button id="captchaLogin">登录</button>
                                        </div>
                                        <!-- 账号登录 -->
                                        <div class="login_type">
                                            <li>账号：<input type="text" id="account"></li>
                                            <li>密码：<input type="text" id="password"></li>
                                            <button id="accountLogin">登录</button>
                                        </div>
                                        
                                        <!-- cookie登录 -->
                                        <div class="login_type">
                                            <textarea name="" id="cookie" cols="30" rows="10"></textarea>
                                            <button id="cookieLogin">登录</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </td>
                        </tr>

                        <tr>
                            <td>空闲歌单ID</td>
                            <td><input type="text" id="songListId" autocomplete="off"></td>
                            <td><button id="loadSongList">加载歌单</button></td>
                        </tr>
                        
                        <tr>
                            <td>播放方式</td>
                            <td><select id="playMode">
                                <option value="0">随机播放</option>
                                <option value="1">列表循环</option>
                                <option value="2">单曲循环</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td>历史空闲歌单</td>
                            <td><select id="freeListIdHistory" size="4"></select></td>
                            <td><button id="selectSongList">选择歌单</button></td>
                        </tr>  
                    </table>

                    <!-- 点歌设置-->
                    <table class="setting_order_page">
                        <tbody>
                            <tr class="input">
                                <td>用户点歌数</td>
                                <td><input type="number" id="userOrder" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>最大点歌数</td>
                                <td><input type="number" id="maxOrder" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>最大歌曲时长</td>
                                <td><input type="number" id="maxDuration" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>超时限播时长</td>
                                <td><input type="number" id="overLimit" autocomplete="off"></td>
                            </tr>
                            <tr class="select">
                                <td>历史点歌用户</td>
                                <td><select id="userHistory" size="4"></select></td>
                                <td><button id="addUserBlack">加入黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>用户黑名单</td>
                                <td>
                                    <select id="userBlackList" size="4">
                                    </select>
                                </td>
                                <td><button id="delUserBlack">移除黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>历史点歌歌曲</td>
                                <td><select id="songHistory" size="4"></select></td>
                                <td><button id="addSongBlack">加入黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>歌曲黑名单</td>
                                <td>
                                    <select id="songBlackList" size="4">
                                    </select>
                                </td>
                                <td><button id="delSongBlack">移除黑名单</button></td>
                            </tr>
                        </tbody>
                    </table>
            
                    <!-- 弹幕设置 -->
                    <table class="setting_danmu_page">
                        <tbody>
                            <tr>
                                <td>平台直播码</td>
                                <td><input type="text" id="danmuCode"></td>
                            </tr>
                            <tr>
                                <td>直播平台</td>
                                <td>
                                    <select name="" id="">
                                    <option value="">bilibili</option>
                                    <option value="">抖音</option>
                                    <option value="">斗鱼</option>
                                    <option value="">小红书</option>
                                    </select>
                                </td>
                                <td><button>切换/重连</button></td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <ul>
                                        <li>文本数据1</li>
                                        <li>文本数据2</li>
                                        <li>文本数据3</li>
                                    <!-- 更多列表项 -->
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 关于 -->
                    <div class="setting_about_page">
                        <p>Hello world</p>
                    </div>
                </di>
            </div>
        </div>
    </div>  
</body>
</html>